<template>
  <div class="user-space-header">
    <cover-image :img="userinfo.coverImg" />
    <div class="user-info">
      <img
        class="user-avatar"
        :src="userinfo.avatar"
        v-default-img="userinfo.username"
      />
      <div class="detail">
        <div v-if="information != null">
          <span class="user-nickname">
            {{ userinfo.username }}
          </span>

          <span
            class="sex"
            v-if="information.male < 3 && iconName != null && iconColor != null"
          >
            <app-icon size="20" :icon="iconName" :color="iconColor" />
          </span>
          <div class="function-btn" v-if="Number(route.params.uid)">
            <div class="follow-btn">
              <el-button type="primary">关注</el-button>
              <!-- <el-button type="danger">取消关注</el-button> -->
            </div>
            <div class="chat-btn">
              <el-button type="primary">私信</el-button>
            </div>
          </div>
          <div class="user-information">
            {{ information.school }}
            {{ information.major }}
          </div>
          <div class="user-birth"> 生日： {{ information.birth }} </div>
          <div class="user-qq"> QQ号： {{ information.qq }} </div>
          <div class="user-sign">
            <app-icon icon="el-icon-mic" />
            {{ information.description }}
          </div>
          <div class="user-sign" v-if="followerCount != null">
            粉丝： {{ followerCount }}
          </div>
          <div class="user-sign" v-if="followeesCount != null">
            关注： {{ followeesCount }}
          </div>
        </div>
      </div>
      <div class="change-btn" v-if="uid==user.id">
        <el-button @click="$router.push('/userinfo/profile')"
          >更改个人资料</el-button
        >
      </div>
    </div>
  </div>
  <div class="information">
    <el-tabs type="border-card" class="inforamtion-tab">
      <el-tab-pane label="发帖">
        <div class="userpost-view">
          <div v-if="list" class="search-area">
            <search-card
              v-for="item in list.records"
              :key="item.id"
              :data="item"
            >
            </search-card>
            <el-empty v-if="list.records.length === 0" />
          </div>
        </div>
        <el-pagination
          v-if="list&&list.records.length>0"
          :page-size="list.size"
          :pager-count="list.pages"
          layout="prev, pager, next"
          :total="list.total"
          class="pagination"
          @size-change="handleUserPostSizeChange"
          @current-change="handleUserPostCurrentChange"
        />
      </el-tab-pane>
      <el-tab-pane label="评论">
        <div v-if="comments&&comments.length>0">
          <comment-card
            v-for="item in comments"
            :data="item"
            :mode="'display'"
          />
        </div>
        <el-empty v-else description="暂无评论" />
      </el-tab-pane>
      <el-tab-pane label="点赞">
        <div class="userlike-view">
          <div v-if="likeList&&likeList.records.length>0" class="search-area">
            <like-card
              v-for="item in likeList.records"
              :key="item.id"
              :data="item"
            >
            </like-card>
          </div>
          <el-empty v-else description="暂无点赞" />
        </div>
        <el-pagination
          v-if="likeList && likeList.records?.length > 0"
          :page-size="likeList.size"
          :pager-count="likeList.pages"
          layout="prev, pager, next"
          :total="likeList.total"
          class="pagination"
          @size-change="handleLikeSizeChange"
          @current-change="handleLikeCurrentChange"
        />
      </el-tab-pane>
      <el-tab-pane label="收藏">
        <div class="usercollection-view">
          <div v-if="collectionList&&collectionList.records.length>0" class="search-area">
            <collection-card
              v-for="item in collectionList.records"
              :key="item.id"
              :data="item"
            >
            </collection-card>
          </div>
          <el-empty v-else description="暂无收藏" />
        </div>
        <el-pagination
          v-if="collectionList && collectionList.records?.length > 0"
          :page-size="collectionList.size"
          :pager-count="collectionList.pages"
          layout="prev, pager, next"
          :total="collectionList.total"
          class="pagination"
          @size-change="handleCollectionSizeChange"
          @current-change="handleCollectionCurrentChange"
        />
      </el-tab-pane>
      <el-tab-pane label="粉丝">
        <div v-if="followerList&&followerList.length>0" class="search-area">
        <person-user-card v-for="item in followerList" :data="item" :key="item.id">
        </person-user-card>
        </div>
          <el-empty v-else description="暂无粉丝" />
        <el-pagination
          v-if="followerList"
          :page-size="followerList.size"
          :pager-count="followerList.pages"
          layout="prev, pager, next"
          :total="followerList.total"
          class="pagination"
          @size-change="handleFollowerSizeChange"
          @current-change="handleFollowerCurrentChange"
        />
      </el-tab-pane>
      <el-tab-pane label="关注">
        <div v-if="followeeList&&followeeList.length>0" class="search-area">
        <person-user-card v-for="item in followeeList" :data="item" :key="item.id">
        </person-user-card>
        </div>
        <el-empty v-else description="暂无关注" />
        <el-pagination
          v-if="followeeList"
          :page-size="followeeList.size"
          :pager-count="followeeList.pages"
          layout="prev, pager, next"
          :total="followeeList.total"
          class="pagination"
          @size-change="handleFolloweeSizeChange"
          @current-change="handleFolloweeCurrentChange"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import CoverImage from './CoverImage.vue'
import { getUserInfo } from '/src/api/user'
import { useRoute, useRouter } from 'vue-router'
import { useUserStore } from '../../store/user'
import { getFollowerCount, getFolloweesCount, doFollow, doUnFollow } from '../../api/follow'
import { ElNotification } from 'element-plus'
import { delPost, getUserPost } from '/src/api/post'
import { getUserCommentList } from '/src/api/comment'
import SearchCard from '/src/components/SearchCard/index.vue'
import CommentCard from '/src/components/CommentCard/index.vue'
import LikeCard from '/src/components/LikeCard/index.vue'
import CollectionCard from '/src/components/CollectionCard/index.vue'
import { getLikes } from '/src/api/like'
import { getCollects } from '/src/api/collect'
import PersonUserCard from '/src/components/PersonUserCard/index.vue'
import { getFolloweesList, getFollowerList } from '/src/api/follow.js'

const { userinfo } = defineProps({ userinfo: { type: Object, required: true } })

const information = ref(null);
const route = useRoute()
const router = useRouter()
const user = useUserStore()
const uid = Number(route.params.uid)?Number(route.params.uid):user.uid

let iconName = ref(null);
let iconColor = ref(null);
let followerCount = ref(null);
let followeesCount = ref(null);

const list = ref(null)
const loaded = ref(false)

let commentCurrentPage = ref(1)
let commentPageSize = ref(4)
let comments = ref(null)
let likeList = ref(null)
let collectionList = ref(null)
let followerList = ref(null)
let followeeList = ref(null)

let followerCurrentPage = ref(0)
let followerPageSize = ref(4)

let followeeCurrentPage = ref(0)
let followeePageSize = ref(4)

getFolloweesList(uid,followerCurrentPage.value, followerPageSize.value).then(res => (followeeList.value = res.result))

getFollowerList(uid,followeeCurrentPage.value, followeePageSize.value).then(res => (followerList.value = res.result))

getUserPost(1, 4, uid).then(res => (list.value = res.result))

getUserCommentList(uid, commentCurrentPage.value, commentPageSize.value).then(res => {
  comments.value = res.result.pageUtils?.list
})
function handleUserPostSizeChange(val) {
  getUserPost(val, list.value.size, uid).then((res) => (list.value = res.result))
  // console.log(`每页 ${val} 条`);
}
function handleUserPostCurrentChange(val) {
  getUserPost(val, list.value.size, uid).then((res) => (list.value = res.result))
  // console.log(`当前页: ${val}`);
}

getUserInfo(uid).then((res) => {
  information.value = res.result
  iconColor = information.male === 1 ? '#40a9ff' : '#ff7474'
  iconName = `el-icon-` + `${information.male === 1 ? 'male' : 'female'}`
})

getFollowerCount(uid).then(res => {
  followerCount.value = res.result
})

getFolloweesCount(uid).then(res => {
  followeesCount.value = res.result
})

getCollects(1, 4, uid).then((res) => (collectionList.value = res.result))
function handleCollectionSizeChange(val) {
  getCollects(val, collectionList.value.size, uid).then((res) => (collectionList.value = res.result))
  // console.log(`每页 ${val} 条`);
}

function handleCollectionCurrentChange(val) {
  getCollects(val, collectionList.value.size, uid).then((res) => (collectionList.value = res.result))
  // console.log(`当前页: ${val}`);
}

getLikes(1, 4, uid).then((res) => (likeList.value = res.result))

function handleLikeSizeChange(val) {
  getLikes(val, likeList.value.size, uid).then((res) => (likeList.value = res.result))
  // console.log(`每页 ${val} 条`);
}
function handleLikeCurrentChange(val) {
  getLikes(val, likeList.value.size, uid).then((res) => (likeList.value = res.result))
  // console.log(`当前页: ${val}`);
}

function handleFollowerSizeChange(val) {
  getLikes(val, followerList.value.size, uid).then((res) => (followerList.value = res.result))
  // console.log(`每页 ${val} 条`);
}
function handleFollowerCurrentChange(val) {
  getLikes(val, followerList.value.size, uid).then((res) => (followerList.value = res.result))
  // console.log(`当前页: ${val}`);
}

function handleFolloweeSizeChange(val) {
  getLikes(val, followeeList.value.size, uid).then((res) => (followeeList.value = res.result))
  // console.log(`每页 ${val} 条`);
}
function handleFolloweeCurrentChange(val) {
  getLikes(val, followeeList.value.size, uid).then((res) => (followeeList.value = res.result))
  // console.log(`当前页: ${val}`);
}
</script>

<style lang="scss" scoped>
.userlike-view {
  height: 85%;
  overflow-y: auto;
}

.search-card:hover .userlike-btn {
  color: #1e80ff;
  visibility: visible;
}

.userlike-btn {
  margin: 6px;
  font-size: 14px;
  cursor: pointer;
  visibility: hidden;
}

.user-space-header {
  height: 600px;
  margin-bottom: 16px;
  overflow: hidden;
  background: #ffffff;

  & > .user-info {
    position: relative;
    // height: 100%;
    > .user-avatar {
      position: absolute;
      top: -24px;
      left: 10px;
      height: 100px;
      border: 3px solid #ebe0e0;
      border-radius: 8px;
    }

    > .detail {
      position: absolute;
      top: 5px;
      left: 125px;

      .user-nickname {
        margin-right: 12px;
        font-size: 26px;
        font-weight: bold;
      }

      .user-sign {
        display: flex;
        align-items: center;
        margin-top: 12px;
        color: grey;
      }

      .user-information {
        display: flex;
        align-items: center;
        margin-top: 12px;
      }
      .user-birth {
        display: flex;
        align-items: center;
        margin-top: 12px;
      }
      .user-qq {
        display: flex;
        align-items: center;
        margin-top: 12px;
      }
      .function-btn {
        display: flex;
        float: right;
        .follow-btn {
          margin-right: 25px;
        }
      }
    }
    .change-btn {
      position: absolute;
      top: 290px;
      right: 15px;
    }
  }
}
.information {
  height: 600px;

  .inforamtion-tab {
    position: relative;
    height: 1000px;
    // top: 290px;
    // right: 15px;
  }
}
.userpost-view {
  height: 85%;
  overflow-y: auto;
}

.search-card:hover .userpost-btn {
  color: #1e80ff;
  visibility: visible;
}

.userpost-btn {
  margin: 6px;
  font-size: 14px;
  cursor: pointer;
  visibility: hidden;
}

.pagination {
  position: flex;
  justify-content: center;
}

.usercollection-view {
  height: 85%;
  overflow-y: auto;
}

.search-card:hover .usercollection-btn {
  color: #1e80ff;
  visibility: visible;
}

.usercollection-btn {
  margin: 6px;
  font-size: 14px;
  cursor: pointer;
  visibility: hidden;
}
</style>
